<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
      <input v-model="addMsg" type="text">
      <button v-on:click="add">添加</button>

      <input v-model="searchMsg" type="text">
      <button v-on:click="search">查询</button>

      <ul>
        <li v-for="(item, index) in arr">
          {{ item.msg }}
          <button v-on:click="remove(item)">delete</button>
        </li>
      </ul>
    </div>

    <script src="js/vue.js"></script>

    <script>
      // map
      // filter
      // reduce
      // includes
      // findIndex
        let myApp = new Vue({
            el: '#app',
            data: {
              addMsg: '',
              searchMsg: '',
              arr: []
            },
            methods: {
              search () {
                var sessionArr = JSON.parse(sessionStorage.getItem('sessionArr'))

                this.arr = sessionArr.filter(item => {
                  return item.msg.includes(this.searchMsg)
                })
              },
              add () {
                var sessionArr = []

                if (sessionStorage.getItem('sessionArr')) {
                  sessionArr = JSON.parse(sessionStorage.getItem('sessionArr'))

                  sessionArr.push({id: new Date().getTime(), msg: this.addMsg})
                } else {
                  sessionArr.push({id: new Date().getTime(), msg: this.addMsg})
                }

                // // 基本数据类型---直接储存
                // // 引用类型---JSON.stringify
                sessionStorage.setItem('sessionArr', JSON.stringify(sessionArr))
                // // this.arr.push({id: new Date().getTime(), msg: this.addMsg})

                this.arr = JSON.parse(sessionStorage.getItem('sessionArr'))

                this.addMsg = ''
              },
              remove (data) {
                console.log(data)
                var sessionArr = JSON.parse(sessionStorage.getItem('sessionArr'))

                var index = sessionArr.findIndex(item => {
                  return item.id === data.id
                })

                sessionArr.splice(index, 1)

                sessionStorage.setItem('sessionArr', JSON.stringify(sessionArr))

                this.arr = JSON.parse(sessionStorage.getItem('sessionArr'))
                console.log('index', index)
              }
            },
            computed: {
              newArr () {
                return JSON.parse(sessionStorage.getItem('sessionArr'))
              }
            }
        })
    </script>
</body>
</html>